<?php
#+------------------------------------------------------------------
#| 普通的。
#+------------------------------------------------------------------
#| Author:Janmas Cromwell <janmas-cromwell@outlook.com>
#+------------------------------------------------------------------
namespace form\element\form;

use form\element\form\traits\File;

/**
 * 单图上传
 */
class SingleImage extends Input
{
    use File;

    protected $isFile = true;

    protected $loadJs = [
        'http://lyear.itshubao.com/iframe/js/bootstrap-notify.min.js',
        'http://lyear.itshubao.com/iframe/js/lightyear.js'
    ];

    protected $loadCss = [
        'http://lyear.itshubao.com/iframe/css/animate.css',
        'http://lyear.itshubao.com/iframe/css/bootstrap.min.css'
    ];

    protected function getImages(): string
    {
        $html = '<div class="input-group">';
        foreach ($this->uploadedFile as $file) {
            $html .= <<<HTML

<img src="$file" width="200px" class="img-thumbnail rounded d-block">

HTML;

        };
        $html .= '</div>';
        return $html;
    }

    public function normal(): string
    {
        $label = $this->getLabel();
        $class = $this->getClass();
        $id = $this->getId();
        $multiple = $this->getMultiple();
        $accept = $this->getExt();
        $labelClass = $this->getLabelClass();
        $uploadedFile = $this->getUploadedFile();
        $img = $this->getImages();
        $exts = implode('|', $this->ext);
        $callback = $this->getCallback();
        $this->js = <<<SCRIPT

    $(document).on('click', '#btn_$this->name', function() {
        var browser = $(this);
        var file = browser.closest('.file-group').find('[type="file"]');
        file.on( 'click', function(e) {
            e.stopPropagation();
        });
        file.trigger('click');
    });
    
      $(document).on('change', '#file_group_$this->name [type="file"]', function() {
        var _this    = $(this);
        var input   = $(this)[0];
        var len     = input.files.length;
        var formFile = new FormData();

        if (len == 0) {
            return false;
        } else {
            var fileaccept = _this.attr('ext');
        var fileType      = input.files[0].type;
        var type          = (fileType.substr(fileType.lastIndexOf("/") + 1)).toLowerCase();

            if (!type || fileaccept.indexOf(type) == -1) {
                lightyear.notify('您上传图片的类型不符合($exts)', 'danger', 1000);
         return false;
            }
            formFile.append("file", input.files[0]);
        }

        var data = formFile;
        lightyear.loading('show');

        $.ajax({
            url: '$this->url',
            data: data,
            type: "POST",
            dataType: "json",
            //上传文件无需缓存
            cache: false,
            //用于对data参数进行序列化处理 这里必须false
             processData: false,
            //必须
            contentType: false,
            success: function (res) {
                lightyear.loading('hide');
                $callback
            },
        });
    });
SCRIPT;

        return <<<HTML
 <div class="$class file-group" id="file_group_$this->name">
    <label for="$id" class="$labelClass">$label</label>
    <div class="input-group">
        <input type="text" class="form-control file-value" name="$this->name" id="$id" value="$uploadedFile" placeholder="$this->placeholder" />
        <input type="file" class="hidden" $multiple $accept style="display: none;"/>
        <div class="input-group-btn">
            <button class="btn btn-default file-browser" id="btn_$this->name" type="button">上传</button>
        </div>
    </div>
    $img
</div>

HTML;


    }

    protected function inline()
    {
        $label = $this->getLabel();
        $class = $this->getClass();
        $id = $this->getId();
        $multiple = $this->getMultiple();
        $accept = $this->getExt();
        $labelClass = $this->getLabelClass();
        $uploadedFile = $this->getUploadedFile();
        $exts = implode('|', $this->ext);
        $callback = $this->getCallback();

        $this->js = <<<SCRIPT

    $(document).on('click', '#btn_$this->name', function() {
        var browser = $(this);
        var file = browser.closest('.file-group').find('[type="file"]');
        file.on( 'click', function(e) {
            e.stopPropagation();
        });
        file.trigger('click');
    });
    
      $(document).on('change', '#file_group_$this->name [type="file"]', function() {
        var _this    = $(this);
        var input   = $(this)[0];
        var len     = input.files.length;
        var formFile = new FormData();

        if (len == 0) {
            return false;
        } else {
            var fileaccept = _this.attr('ext');
        var fileType      = input.files[0].type;
        var type          = (fileType.substr(fileType.lastIndexOf("/") + 1)).toLowerCase();

            if (!type || fileaccept.indexOf(type) == -1) {
                lightyear.notify('您上传图片的类型不符合($exts)', 'danger', 1000);
         return false;
            }
            formFile.append("file", input.files[0]);
        }

        var data = formFile;
        lightyear.loading('show');

        $.ajax({
            url: '$this->url',
            data: data,
            type: "POST",
            dataType: "json",
            //上传文件无需缓存
            cache: false,
            //用于对data参数进行序列化处理 这里必须false
             processData: false,
            //必须
            contentType: false,
            success: function (res) {
                lightyear.loading('hide');
                $callback
            },
        });
    });
SCRIPT;
        return <<<HTML
 <div class="$class file-group" id="file_group_$this->name">
    <label for="$id" class="$labelClass">$label</label>
    <div class="input-group">
        <input type="text" class="form-control file-value" name="$this->name" id="$id" value="$uploadedFile" placeholder="$this->placeholder" />
        <input type="file" class="hidden" $multiple $accept style="display: none;"/>
        <div class="input-group-btn">
            <button class="btn btn-default file-browser" id="btn_$this->name" type="button">上传</button>
        </div>
    </div>
</div>

HTML;
    }
}